<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :multiple="true"
      :action="uploadUrl"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :auto-upload="false"
      :with-credentials="true"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px;"
        size="small"
        type="success"
        @click="upload"
      >上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">一次可选择n个(发n次请求，调用服务端单文件上传接口即可)--多文件上传</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "multiFilesUploadDemo1",
  data() {
    return {
      fileList: [],
      uploadUrl:
        this.GlobalConstants.BASE_URL + "fileOperations/singleFileUpload2"
    };
  },

  methods: {
    upload: function() {
      this.$refs.upload.submit();
    },
    handleRemove: function(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview: function(file) {
      console.log(file);
    },
    handleExceed: function() {
      this.fileList = [];
      this.$message({
        type: "warn",
        message: "上传文件大小超出限制"
      });
    },
    handleError: function() {
      this.fileList = [];
      this.$message({
        message: "文件上传失败"
      });
    },
    handleSuccess: function() {
      this.fileList = [];
      this.$message({
        type: "success",
        message: "文件上传成功"
      });
    }
  }
};
</script>
